<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Device Web</title>
    <style>

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            position: relative;
            z-index: 1;
            margin: 0;
            font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma, serif;
            background: -webkit-linear-gradient(45deg, #5EB1E1, #8780E7); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(45deg, #5EB1E1, #8780E7); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(45deg, #5EB1E1, #8780E7); /* Firefox 3.6 - 15 */
            background: linear-gradient(45deg, #5EB1E1, #8780E7); /* 标准的语法 */
        }

        .container {
            max-width: 600px;
            margin: 30px auto auto;
        }

        #modal-show {
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
        }

        #modal-show2 {
            overflow: hidden;
            width: 40%;
            margin: 100px auto;
            padding: 20px 50px;
            background-color: #eee;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
        }
        @media screen and (max-width: 768px) {
            #modal-show2 {
                width: 80%;
                padding: 20px;
            }
        }

        .footer {
            margin-top: 30px;
            margin-bottom: 30px;
            width: 100%;
            text-align: center;
            font-size: 13px;
            color: #d9d9d9;
        }

        fieldset {
            border: 0;
            padding: 15px;
            margin-bottom: 20px;
            background: #f4f7fa;
            position: relative;
        }

        div.title {
            border-bottom: 1px solid #dce1e5;
            color: #8e9aa9;
            padding: 0px 10px 8px 10px;
            margin-bottom: 10px;
        }

        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .btn-primary {
            color: #fff;
            background-color: #4F709F;
            border-color: #137697;
        }

        .text-right {
            text-align: right;
        }

        .text-left {
            text-align: left;

        }

        #load {
            display: none;
        }

        @-webkit-keyframes pace-spinner {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-moz-keyframes pace-spinner {
            0% {
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -moz-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-o-keyframes pace-spinner {
            0% {
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-ms-keyframes pace-spinner {
            0% {
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes pace-spinner {
            0% {
                transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .pace-activity {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            animation: 400ms linear 0s normal none infinite running pace-spinner;
            border-color: #29d transparent transparent #29d;
            border-image: none;
            border-radius: 10px;
            border-style: solid;
            border-width: 2px;
            display: block;
            height: 14px;
            width: 14px;

        }

        .form-group {
            margin-bottom: 10px;
            width: 100%;
            float: left;
            color: #5A6779;

        }

        .form-control {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background: #fff none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }

        .col-xs-4 {
            float: left;
            width: 33.33333333%;
        }

        .col-xs-8 {
            float: left;
            width: 66.66666667%;
        }
        .ipbox {
            display: block;
            width: 50%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background: #fff none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
		
        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
        }

        .header {
            height: 50px;
            background: #2d2c41;
        }
        .item{
            color:#5A6779;
            margin-bottom: 0px;
            margin-top: 0px;
            padding-left: 0px;
            padding-right: 0px;
            height:40px;
            font-size: 16px;
            overflow: hidden;
        }
        .item:hover{
            background-color: #d7d7d7;
            cursor: pointer;
        }
        .item .itemText{
            margin-top: 10px;
            display: inline-block;
        }
        .icon{
            display: inline-block;
            width:34px;
            height: 27px;
			margin-top: 6px;
            background-image:url(./signal.png);
            background-repeat:no-repeat;
            float: right;
        }
		#progressbar {
			margin-top: 10px;
			padding: 0;
			border: 1px solid #ccc;
			height: 30px;
			width: 400px;
			background-color: #FFFFFF;
		}
		#progressbarinner {
			width: 10px;
			height: 28px;
			border: none;
			background-color: #6e9de3;
		}
    </style>
</head>
<body>
<!--<div class="header"></div>-->
<div class="container">
    <fieldset>
        <div class="title">Device Information</div>

        <div class="form-group">
            <label class="col-xs-4">Serial Number:</label>
            <div id="sn" class="col-xs-8">
                EAB961542222
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4">Register Key:</label>
            <div id="key" class="col-xs-8">
                ESADFRVDS2343SDF
            </div>
        </div>

        <div class="form-group">
            <label class="col-xs-4">Hardware Version:</label>
            <div id="hardware" class="col-xs-8">
                M10
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4">Software Version:</label>
            <div id="software" class="col-xs-8">
                16522-234R
            </div>
        </div>

    </fieldset>
    <fieldset>
        <div class="title">UART Settings</div>

        <div class="form-group">
            <label>Baudrate:</label>

            <select id="baud" class="form-control">
                <option value="0">115200</option>
                <option value="1">57600</option>
                <option value="2">38400</option>
                <option value="3">19200</option>
                <option value="4">9600</option>
            </select>

        </div>

        <div class="form-group">
            <label>Data Bits:</label>

            <select id="dbits" class="form-control">
                <option value="0">8</option>
                <option value="1">7</option>
                <option value="2">6</option>
                <option value="3">5</option>
            </select>

        </div>

        <div class="form-group">
            <label>Stop Bits:</label>
            <select id="sbits" class="form-control">
                <option value="0">1</option>
                <option value="1">1.5</option>
                <option value="2">2</option>
            </select>

        </div>

        <div class="form-group">
            <label>Parity:</label>
            <select id="parity" class="form-control">
                <option value="0">None</option>
                <option value="1">Odd</option>
                <option value="2">Even</option>
            </select>


        </div>

        <div class="text-right">
            <button class="btn btn-primary" onclick="postSerialPara()">Save</button>
        </div>
    </fieldset>
    <fieldset>
        <div class="title">Server Settings</div>
        <div class="form-group">
            <label class="col-xs-4">Connection Status:</label>
            <div id="serverstatus" class="col-xs-8">
                0
            </div>
        </div>
        <div class="form-group">
            <label>Server Address:</label>

            <input id="serveraddr" class="form-control" placeholder="your.server.addr"/>

        </div>

        <div class="form-group">
            <label>Server Port:</label>

            <input id="serverport" class="form-control" value="0"/>

        </div>

        <div class="form-group">
            <label>Local Port:</label>

            <input id="localport" class="form-control" value="0"/>

        </div>
        <div class="text-right">
            <button class="btn btn-primary" onclick="postServerPara();">Save</button>
        </div>

    </fieldset>
    <fieldset>
        <div class="title">Firmware Upgrade</div>
		
		<input type="file" id="file"/>
		<div id="remark"></div>
		<div id="progressbar"><div id="progressbarinner"></div></div>
		<div class="text-right">
			<button class="btn btn-primary" onclick="doUpgrade()">Upgrade</button>
		</div>
		<!--<input type="submit" value="Upgrade!" onclick="doUpgrade()" />-->

	</fieldset>
    <fieldset>
        <div class="title">Wi-Fi Connection</div>

        <div class="form-group">
            <label class="col-xs-4">Wi-Fi SSID:</label>
            <div id="connssid" class="col-xs-8">
                TP_Link
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4">Connection Status:</label>
            <div id="wifistatus" class="col-xs-8">
                0
            </div>
        </div>
        <div class="form-group">
            <input type="checkbox" id="endhcp" name="endhcp" onclick="enable_dhcp()"/>
			Using the following static IP address
        </div>
        <div class="form-group">
            <label class="col-xs-4">Address:</label>
            <input id="ip" class="ipbox" value="0.0.0.0"/>
        </div>
		<div class="form-group">
            <label class="col-xs-4">Netmask:</label>
            <input id="mask" class="ipbox" value="0.0.0.0"/>
        </div>
		<div class="form-group">
            <label class="col-xs-4">Gateway:</label>
            <input id="gate" class="ipbox" value="0.0.0.0"/>
        </div>

        <div class="text-right">
			<button class="btn btn-primary" onclick="postIPPara();">Save</button>
            <button class="btn btn-primary" onclick="scan();">Scan</button>
        </div>
        <div class="text-left">
            <div id="load">
                <div class="pace-activity"></div>
            </div>
            <div id="wifi"></div>
        </div>
    </fieldset>

</div>
<div id="modal-show">
    <div id="modal-show2">
        <div class="title">Connect</div>
        <div class="form-group">
            <label>Router SSID:</label>
            <input id="routerssid" class="form-control" placeholder="input your router ssid"/>
        </div>
        <div class="form-group">
            <label>Router Password:</label>
            <input id="routerpassword" type="password" class="form-control" placeholder="password"/>
        </div>
        <div class="text-right">
            <button class="btn btn-primary" onclick="cancel();">Cancel</button>
            <button class="btn btn-primary" onclick="connect();">Connect</button>
        </div>
    </div>
</div>

<div class="footer">Chengdu E-Linter Information Technology Co., Ltd. All Right Reserved</div>

<script type="text/javascript">
    function test(msg) {
        var v_baud = document.getElementById("baud").value;
        var v_dbits = document.getElementById("dbits").value;
        var v_sbits = document.getElementById("sbits").value;
        var v_parity = document.getElementById("parity").value;
        alert(msg);
        var param = '{"baud":' + v_baud + "," + '"dbits":' + v_dbits + "," + '"sbits":' + v_sbits + "," + '"parity":' + v_parity + "}";
        alert(param);
        document.getElementById("baud").value = 1;
        document.getElementById("wifistatus").innerHTML = 'abc';
        document.getElementById("sn").innerHTML = "EEEEE"
        //$.post()
    }
    //test("abc");

    function createXHR() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
        else {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    function getAJAX(fn, url) {
        var xhr = createXHR();
        xhr.open("GET", url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {//异步请求时的状态码4代表数据接收完毕
                if (xhr.status == 200) {//HTTP的状态 成功
                    var data = eval("(" + xhr.responseText + ")");
                    fn(data);//实现函数的回调,将结果返回
                }
            }
        }
        xhr.send(null);
    }

    function postAJAX(fn, url, str) {
        var xhr = createXHR();
        xhr.open("POST", url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {//异步请求时的状态码4代表数据接收完毕
                if (xhr.status == 200) {//HTTP的状态 成功
                    alert("SET OK!");
                }
            }
        }
        xhr.send(str);
    }

    function parse_serial_vars(data) {
        document.getElementById("baud").value = data.baud;
        document.getElementById("dbits").value = data.dbits;
        document.getElementById("sbits").value = data.sbits;
        document.getElementById("parity").value = data.parity;
        //alert(data.baud);
    }
    function parse_server_vars(data) {
        document.getElementById("serveraddr").value = data.serveraddr;
        document.getElementById("serverport").value = data.serverport;
        document.getElementById("localport").value = data.localport;
        //alert(data.baud);
    }

    function parse_dev_vars(data) {
        document.getElementById("sn").innerHTML = data.sn;
        document.getElementById("key").innerHTML = data.key;
        document.getElementById("hardware").innerHTML = data.hw;
        document.getElementById("software").innerHTML = data.sw;
        //alert(data.baud);
    }

    function parse_status_vars(data) {
		var tcp_status = data.serverstatus;
		var wifi_status = data.wifistatus;
		var tcp_info = "Unknown Error";
		var wifi_info = "Unknown Error"
		switch(tcp_status){
			case 0: tcp_info = "Connection Idle"; break;
			case 1: tcp_info = "Connecting..."; break;
			case 2: tcp_info = "Wi-Fi Disconnected"; break;
			case 3: tcp_info = "DNS Error"; break;
			case 4: tcp_info = "Socket Error"; break;
			case 5: tcp_info = "Connect Fail"; break;
			case 6: tcp_info = "Connected OK"; break;
			default: tcp_info = "Unknown Error"; break;
		}
		switch(wifi_status){
			case 0: wifi_info = "Connection Idle"; break;
			case 1: wifi_info = "Connecting..."; break;
			case 2: wifi_info = "Password Error"; break;
			case 3: wifi_info = "AP Not Found"; break;
			case 4: wifi_info = "Connect Fail"; break;
			case 5: wifi_info = "Connected OK"; break;
			default: wifi_info = "Unknown Error"; break;
		}

        document.getElementById("serverstatus").innerHTML = tcp_info;
        document.getElementById("connssid").innerHTML = data.connssid;
        document.getElementById("wifistatus").innerHTML = wifi_info;
		if(data.dhcp == 0){
			document.getElementById("endhcp").checked = false;
		}
		else{
			document.getElementById("endhcp").checked = true;
		}
		enable_dhcp();
		document.getElementById("ip").value = data.ipaddr;
		document.getElementById("mask").value = data.mask;
		document.getElementById("gate").value = data.gateway;
        
        //alert(data.baud);
    }
	function parse_list_vars(data) {
		var str = "";
		var list = document.getElementById("wifi");
        var load = document.getElementById("load");
		
		var ssid_temp = "";
		var rssi_temp;
		///list 
			if (data.result.inProgress=="0" && data.result.APs.length>1) {
				for (var i=0; i<data.result.APs.length; i++) {
					if (data.result.APs[i].essid=="" && data.result.APs[i].rssi==0) continue;
					var rssidbm = 256 - data.result.APs[i].rssi;
					var rssilevel = 0;
					if(rssidbm>85){
						//break;    //don't display the signal that too weak
					}
					if(rssidbm > 89){
						rssilevel = 0;
					}
					else if((rssidbm <= 89) && (rssidbm > 81)){
						rssilevel = 1;
					}
					else if((rssidbm <= 81) && (rssidbm > 73)){
						rssilevel = 2;
					}
					else if((rssidbm <= 73) && (rssidbm > 65)){
						rssilevel = 3;
					}
					else if(rssidbm <= 65){
						rssilevel = 4;
					}
					
                    var rssiVal =-Math.floor(rssilevel)*27;
                    str += "<div class='item'><div  class='itemText'>" + data.result.APs[i].essid + "</div><div class='icon' style='background-position: 0px "+rssiVal+"px'></div></div>";
				}
				load.style.display = "none";
				list.innerHTML = str;
				var wifiList = document.getElementsByClassName("item");
				for (var i = 0; i < wifiList.length; i++) {
					wifiList[i].addEventListener('click', function () {
						document.getElementById("modal-show").style.display = "block";
						document.getElementById("routerssid").value=this.innerText;
						document.getElementById("routerpassword").value="";
					});
				}
				//window.setTimeout(scan, 30000);
			} else {
				window.setTimeout(scan, 1000);
			}
			/*
		["1111", "222222", "33333333", "444444"].map(function (item) {
                str += "<div class='item'>" + item + "</div>";
            })
            load.style.display = "none";
            list.innerHTML = str;
			
		var wifiList = document.getElementsByClassName("item");
            for (var i = 0; i < wifiList.length; i++) {
                wifiList[i].addEventListener('click', function () {
                    document.getElementById("modal-show").style.display = "block";
                    document.getElementById("routerssid").value=this.innerText;
                });
            }
			*/
    }

    function postSerialPara() {
        var v_baud = document.getElementById("baud").value;
        var v_dbits = document.getElementById("dbits").value;
        var v_sbits = document.getElementById("sbits").value;
        var v_parity = document.getElementById("parity").value;

        var param = '{"baud":' + v_baud + "," + '"dbits":' + v_dbits + "," + '"sbits":' + v_sbits + "," + '"parity":' + v_parity + "}";
        //alert(param);
        postAJAX(null, "config?command=serial", param);
    }
    function postServerPara() {
        var seraddr = document.getElementById("serveraddr").value;
        //if(seraddr == "") seraddr = "123";
        var remport = document.getElementById("serverport").value;
        var locport = document.getElementById("localport").value;

        var param = '{"serveraddr":' + '"' + seraddr + '"' + "," + '"serverport":' + remport + "," + '"localport":' + locport + "}";
        //alert(param);
        postAJAX(null, "config?command=server", param);
    }
	function postIPPara() {
		var dhcp;
		if(document.getElementById("endhcp").checked == false){
			dhcp = 0;
		}
		else{
			dhcp = 1;
		}
		var ip = document.getElementById("ip").value;
		var mask = document.getElementById("mask").value;
		var gate = document.getElementById("gate").value;
		
        var param = '{"dhcp":' + dhcp + "," + '"ipaddr":' + '"' + ip + '"' + "," + '"mask":' + '"' + mask + '"' + "," + '"gateway":' + '"' + gate + '"' + "}";
		postAJAX(null, "config?command=ip", param);
	}
    function getSerialPara() {
        var url = "config?command=serial";
        getAJAX(parse_serial_vars, url);
    }

    function getServerPara() {
        var url = "config?command=server";
        getAJAX(parse_server_vars, url);
    }

    function getDevPara() {
        var url = "config?command=devinfo";
        getAJAX(parse_dev_vars, url);
    }
    function getStatusPara() {
        var url = "config?command=status";
        getAJAX(parse_status_vars, url);
    }
	function getScanPara() {
        var url = "wifiscan.cgi";
        getAJAX(parse_list_vars, url);
    }
    function connect() {
        var ssid = document.getElementById("routerssid").value;
        var pwd = document.getElementById("routerpassword").value;

        if (ssid == "") {
            alert("Please input the ssid!");
            return;
        }
        var param = '{"ssid":' + '"' + ssid + '"' + "," + '"password":' + '"' + pwd + '"' + "}";
        //alert(param);
        postAJAX(null, "config?command=router", param);
		document.getElementById("modal-show").style.display = "none";
    }
    function scan() {
        var str = "";
        var list = document.getElementById("wifi");
        var load = document.getElementById("load");
        load.style.display = "block";
		getScanPara();
		/*
        setTimeout(function () {
            ["1111", "222222", "33333333", "444444"].map(function (item) {
                str += "<div class='item'>" + item + "</div>";
            })
            load.style.display = "none";
            list.innerHTML = str;
            var wifiList = document.getElementsByClassName("item");
            for (var i = 0; i < wifiList.length; i++) {
                wifiList[i].addEventListener('click', function () {
                    document.getElementById("modal-show").style.display = "block";
                    document.getElementById("routerssid").value=this.innerText;
                });
            }
        }, 2000)
		*/
    }
    function cancel() {
        document.getElementById("modal-show").style.display = "none";
    }
	
	function enable_dhcp()
	{
		if(document.getElementById("endhcp").checked == false){
			document.getElementById("ip").readOnly=true;
			document.getElementById("ip").style.background="#F1F1F1";
			document.getElementById("mask").readOnly=true;
			document.getElementById("mask").style.background="#F1F1F1";
			document.getElementById("gate").readOnly=true;
			document.getElementById("gate").style.background="#F1F1F1";
		}
		else{
			document.getElementById("ip").readOnly=false;
			document.getElementById("ip").style.background="#FFF";
			document.getElementById("mask").readOnly=false;
			document.getElementById("mask").style.background="#FFF";
			document.getElementById("gate").readOnly=false;
			document.getElementById("gate").style.background="#FFF";
		}
		
	}
	function setProgress(amt) {
	document.getElementById("progressbarinner").style.width=String(amt*400)+"px";
}

function doUpgrade() {
	var xhr = createXHR();
	var f=document.getElementById("file").files[0];
	if (typeof f=='undefined') {
		document.getElementById("remark").innerHTML="Can't read file!";
		return
	}
	xhr.open("POST", "upload");
	xhr.onreadystatechange=function() {
		if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
			setProgress(1);
			if (xhr.responseText!="") {
				document.getElementById("remark").innerHTML="Error: "+xhr.responseText;
			} else {
				document.getElementById("remark").innerHTML="Uploading done. Rebooting.";
				doReboot();
			}
		}
	}
	if (typeof xhr.upload.onprogress != 'undefined') {
		xhr.upload.onprogress=function(e) {
			setProgress(e.loaded / e.total);
		}
	}
	xhr.send(f);
	return false;
}

function doReboot() {
	var xhr = createXHR();
	xhr.open("GET", "reboot");
	xhr.onreadystatechange=function() {
		if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
			window.setTimeout(function() {
				location.reload(true);
			}, 3000);
		}
	}
	//ToDo: set timer to 
	xhr.send();
}
    getSerialPara();
    getServerPara();
    getDevPara();
    getStatusPara();

</script>
</body>
</html>
